<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/buttons.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/alert.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/cart.css"/>
    <script src="../../static/js-tuangou/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/js-tuangou/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <title>乐购物车</title>
</head>
<body>

<!-- 广告 -->
<div class="le-top-ad">
    <div class="container le-ad-bg">
        <span class="close">&times;</span>
    </div>
</div>

<!-- nav导航条 -->
<div id="head"></div>

<!-- 购物车列表 -->
<div class="container le-cart-list" id="le-cart-list">
    <!--购物车商品-->
    <div class="row">
        <div class="col-md-1">
            <img class="le-goods-img" src="">
        </div>
        <div class="col-md-6">
            <h4 class="le-goods-title">商品名称</h4>
        </div>
        <div class="col-md-2 hidden-xs hidden-sm">
            <a href="" class="le-goods-shop">商品店铺</a>
        </div>
        <div class="col-md-1 text-center">
            <span class="le-goods-price">单价</span>
        </div>
        <div class="col-md-1 hidden-xs hidden-sm">
            <span class="le-goods-cnt">商品数量</span>
        </div>
    </div>
</div>

<!--商品总价-->
<div id="le-cart-handle" class="container hidden" style="margin: 20px auto; text-align: right;">
    <p style="margin: 0 auto 20px auto; font-size: 30px; color: #C50E1B;">总计：￥<span id="le-sum">00.00</span>
    </p>
    <button type="button" class="button button-glow button-highlight" id="le-cart-clear">清空购物车</button>
    <button type="button" class="button button-glow button-caution" id="le-order">全部下单</button>
</div>

<!--页脚-->
<div id="footter" class="container" style="margin-top: 100px;">
    <hr>
    <h6 class="text-center">免责声明：本站仅供学习参考使用 备注：数据来源 <a href="https://www.jd.com/">京东</a></h6>
</div>

</body>

<script type="text/javascript">

    $('.close').click(function () {
        $('.le-ad-bg').hide();
    });

    //登录后购物车没有商品
    function emptyCortHandle(){
        $("#le-cart-list").html('<h1 style="text-align: center">您的购物车还没有商品..</h1>');
    }


    //页面加载操作
    window.onload = function (){

        //加载导航条
        $("#head").load('head.html');
        $.ajax({
            type:'GET',
            url:'/legou/cart',
            success:function (json){
                if(json.data.cartList != null && json.data.cartList.length > 0){

                    $("#le-cart-handle").removeClass("hidden");

                    //总价
                    let  sum = 0;
                    for(let i = 0; i < json.data.cartList.length; i++){

                        let cart = json.data.cartList[i];

                        //计算购物车的总价
                        sum += cart.goods.price * cart * cnt;
                        let template =
                            `
                            <div class="row">
                                <div class="col-md-1">
                                    <img class="le-goods-img" src="${cart.goods.url}">
                                </div>
                                <div class="col-md-6">
                                    <h4 class="le-goods-title">${cart.goods.title}</h4>
                                </div>
                                <div class="col-md-2 hidden-xs hidden-sm">
                                    <a href="" class="le-goods-shop">${cart.goods.shop}</a>
                                </div>
                                <div class="col-md-1 text-center">
                                    <span class="le-goods-price">${cart.goods.price}</span>
                                </div>
                                <div class="col-md-1 hidden-xs hidden-sm">
                                    <span class="le-goods-cnt">${cart.goods.cnt}</span>
                                </div>
                            </div>
                            `
                        $("le-cart-list").append(template);
                            //
                        $("#le-sum").html(sum.toFixed(2));
                    }
                }
            },
            error:function (json){
                //未登录
                $('<di  v>').appendTo('body').addClass('alert  alert-danger').html(json.responseText).show().delay(1500).fadeOut();
            }
        });
    }

</script>
</html>
